<template>
	<view class="container">
		<!-- 搜索表单 -->
		<view class="query-content">
			<uni-forms ref="queryFormRef" :model="queryForm" :rules="rules" class="form-view">
				<view class="form-row">
					<uni-forms-item label="" name="sex" class="form-item">
						<uni-easyinput v-model="queryForm.sex" placeholder="请输入性别（0:男, 1:女）"
							trim="true"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="" name="classesId" class="form-item" required>
						<uni-easyinput v-model="queryForm.classesId" placeholder="请输入班级ID（必填）"
							trim="true"></uni-easyinput>
					</uni-forms-item>
				</view>
			</uni-forms>
			<button type="primary" class="button-round" @click="submitForm">查 询</button>
		</view>
		<!-- 表头 -->
		<view class="table-header">
			<text class="header-cell">姓名</text>
			<text class="header-cell">学号</text>
			<text class="header-cell">性别</text>
			<text class="header-cell">电话</text>
			<text class="header-cell">邮箱</text>
			<text class="header-cell">班级</text>
		</view>

		<!-- 联系人列表 -->
		<view class="contacts-list">
			<view v-for="(contact, index) in paginatedContacts" :key="index" class="contact-item">
				<text class="contact-cell">{{ contact.nickName }}</text>
				<text class="contact-cell">{{ contact.userName }}</text>
				<text class="contact-cell">{{ contact.sex === '0' ? '男' : '女' }}</text>
				<text class="contact-cell">{{ contact.phonenumber }}</text>
				<text class="contact-cell">{{ contact.email }}</text>
				<text class="contact-cell">{{ contact.classes.classesName }}</text>
			</view>
		</view>

		<!-- 分页控制 -->
		<view class="pagination">
			<button @click="previousPage" :disabled="currentPage <= 1">上一页</button>
			<text>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</text>
			<button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import userApi from '@/api/user.js'
	const queryForm = ref({
		sex: '', // 性别，非必须
		classesId: '', // 班级ID，必须
	});
	const queryFormRef = ref(null);
	const contactsList = ref([]);

	const currentPage = ref(1);
	const pageSize = 5;

	const paginatedContacts = computed(() => {
		const start = (currentPage.value - 1) * pageSize;
		const end = start + pageSize;
		return contactsList.value.slice(start, end);
	});

	const totalPages = computed(() => Math.ceil(contactsList.value.length / pageSize));

	const previousPage = () => {
		if (currentPage.value > 1) {
			currentPage.value--;
		}
	};

	const nextPage = () => {
		if (currentPage.value < totalPages.value) {
			currentPage.value++;
		}
	};

	const submitForm = () => {
		queryFormRef.value.validate().then(res => {
			if (res) {
				console.log('表单验证通过', queryForm.value);
				userApi.getContactsList(queryForm.value.sex, queryForm.value.classesId).then(apiRes => {
					if (apiRes.code === 200) {
						console.log('获取联系人列表成功', apiRes);
						contactsList.value = apiRes.data;
					}
				})
			}
		}).catch(err => {
			console.error('表单验证失败', err);
		});
	};

	const rules = {
		sex: {
			// 可以添加性别验证规则，如果需要
		},
		classesId: {
			rules: [{
				required: true,
				message: '班级ID不能为空',
				trigger: ['blur', 'submit']
			}, ]
		}
	};
</script>

<style lang="scss">
	.container {
		padding: 30px;
	}

	.form-view {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.form-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.form-item {
		flex: 1;
		margin-right: 10px;

		&:last-child {
			margin-right: 0;
		}
	}

	.button-round {
		border-radius: 999px; // Example for rounded button
	}

	.contacts-list {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		padding: 10px;
	}

	.contact-item {
	  display: flex; // 设置为flex布局，使子元素并排显示
	  border-bottom: 1px solid #eee;
	  padding: 10px 0;
	
	  &:last-child {
	    border-bottom: none;
	  }
	}
	
	.contact-cell {
	  flex: 1; // 每个单元格占据相同的空间
	  text-align: center;
	  padding: 10px; // 增加内边距，以便单元格之间有间隔
	}

	.contact-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.contact-name {
		font-size: 18px;
		font-weight: bold;
	}

	.contact-sex {
		font-size: 16px;
	}

	.contact-details {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
	}

	.contact-phone,
	.contact-email,
	.contact-class {
		margin-right: 10px;

		&:last-child {
			margin-right: 0;
		}
	}

	.table-header {
		display: flex;
		background-color: #f0f0f0;
		padding: 10px;
		font-weight: bold;
	}

	.header-cell {
		flex: 1;
		text-align: center;
	}

	.pagination {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	button {
		margin: 0 10px;
	}
	
</style>